<% layout('/layout/default.html', {title: '用户选择', libs: ['dataGrid']}){ %>
<div class="main-content">
	<div class="container-fluid">
		<form id="searchForm" action="${ctx}/sys/user/listData" method="post" class="form-inline " >
			<div class="form-group">
				<label class="control-label">账号：</label>
				<div class="control-inline">
					<input name="loginName" maxlength="100" class="form-control form-control-sm"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label">昵称：</label>
				<div class="control-inline">
					<input name="name" maxlength="100" class="form-control form-control-sm"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label">邮箱：</label>
				<div class="control-inline">
					<input name="email" maxlength="300" class="form-control form-control-sm"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label">手机：</label>
				<div class="control-inline">
					<input name="mobile" maxlength="100" class="form-control form-control-sm"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label">电话：</label>
				<div class="control-inline">
					<input name="phone" maxlength="100" class="form-control form-control-sm"/>
				</div>
			</div>
			<div class="form-group">
				<button type="submit" class="btn btn-success btn-sm">查询</button>
				<button type="reset" class="btn btn-default btn-sm">重置</button>
			</div>
		</form>
		<div class="row">
			<div class="col-md-9 pr10">
				<table id="dataGrid"></table>
				<div id="dataGridPage"></div>
			</div>
			<div class="col-md-3 pl0">
				<div id="selectData" class="tags-input"></div>
			</div>
		</div>
	</div>
</div>
<% } %>
<script>
	var selectData = JSON.parse(js.decodeURI('${selectData}')), selectNum = 0,
			dataGrid = $('#dataGrid').dataGrid({
				searchForm: $("#searchForm"),
				columnModel: [
					{header:'登录账号', name:'loginName', index:'a.login_name', width:200, align:"center"},
					{header:'用户昵称', name:'name', index:'a.name', width:200, align:"center"},
					{header:'电子邮箱', name:'email', index:'a.email', width:200, align:"center"},
					{header:'手机号码', name:'mobile', index:'a.mobile', width:200, align:"center"},
					{header:'办公电话', name:'phone', index:'a.phone', width:200, align:"center"},
					{header:'更新时间', name:'updateDate', index:'a.update_date', width:200, align:"center"},
					/* {header:'状态', name:'status', index:'a.status', width:100, align:"center", formatter: function(val, obj, row, act){
                        return js.transDictLabel(${@DictUtils.getDictListJson('sys_status')}, val, '未知');
                    }}, */
					{header:'行数据', name:'rowData', hidden:true, formatter: function(val, obj, row, act){
							return JSON.stringify(row);
						}}
				],
				autoGridHeight: function(){
					var height = $(window).height() - $('#searchForm').height() - $('#dataGridPage').height() - 73;
					$('.tags-input').height($('.ui-jqgrid').height() - 10);
					return height;
				},
				showCheckbox: ${checkbox == 'true'},
				multiboxonly: false, // 单击复选框时再多选
				ajaxSuccess: function(data){
					$.each(selectData, function(key, value){
						dataGrid.dataGrid('setSelectRow', key);
					});
					initSelectTag();
				},
				onSelectRow: function(id, isSelect, event){
					if (${checkbox == 'true'}){
						if(isSelect){
							selectData[id] = JSON.parse(dataGrid.dataGrid('getRowData', id).rowData);
						}else{
							delete selectData[id];
						}
					}else{
						selectData = {};
						selectData[id] = JSON.parse(dataGrid.dataGrid('getRowData', id).rowData);
					}
					initSelectTag();
				},
				onSelectAll: function(ids, isSelect){
					if (${checkbox == 'true'}){
						for (var i=0; i<ids.length; i++){
							if(isSelect){
								selectData[ids[i]] = JSON.parse(dataGrid.dataGrid('getRowData', ids[i]).rowData);
							}else{
								delete selectData[ids[i]];
							}
						}
					}
					initSelectTag();
				},
				ondblClickRow: function(id, rownum, colnum, event){
					if (${checkbox != 'true'}){
						js.layer.$('#' + window.name).closest('.layui-layer')
								.find(".layui-layer-btn0").trigger("click");
					}
					initSelectTag();
				}
			});
	function initSelectTag(){
		selectNum = 0;
		var html = [];
		$.each(selectData, function(key, value){
			selectNum ++;
			html.push('<span class="tag" id="'+key+'_tags-input"><span>'+value.name+' </span>'
					+ '<a href="#" onclick="removeSelectTag(\''+key+'\');" title="取消选择">x</a></span>');
		});
		html.unshift('<div class="title">当前已选择<span id="selectNum">'+selectNum+'</span>项：</div>');
		$('#selectData').empty().append(html.join(''));
	}
	function removeSelectTag(key){
		delete selectData[key];
		dataGrid.dataGrid('resetSelection', key);
		$('#selectNum').html(--selectNum);
		$('#'+key+'_tags-input').remove();
	}
	function getSelectData(){
		return selectData;
	}
</script>
